<script lang="ts" setup>
import { ref, inject, nextTick } from "vue";
import commentItem from "@/components/views/commentItem/commentItem.vue";
import commentInput from "../commentInput/commentInput.vue";
import onIntoView from "@/utils/onDomIntoView";
interface dataType {
  id?: number;
  User?: {
    avatarUrl: string;
    username: string;
  };
  UserId?: number;
  content?: string;
  createdAt?: string;
  date?: string;
  likeNum?: number;
  parentId?: number | null;
  postId?: number;
  totalReplies?: number;
  updatatedAt?: string;
}
const props = withDefaults(
  defineProps<{
    comments: dataType[];
    total: number;
  }>(),
  {
    comments: () => [
      {
        id: -1,
        User: {
          avatarUrl: "",
          username: "",
        },
        UserId: -1,
        content: "",
        createdAt: "",
        date: "",
        likeNum: -1,
        parentId: null,
        postId: -1,
        totalReplies: -1,
        updatatedAt: "",
      },
    ],
    total: -1,
  }
);
const drawer = ref<boolean>(false);
const open = (): void => {
  drawer.value = true;
  nextTick(() => {
    onIntoView(loadingRef.value!, () => {
      nextPage!();
    });
  });
};
const close = (): void => {
  drawer.value = false;
  nextTick(() => {
    clearComments!();
  });
};
defineExpose({
  open,
  close,
});
//--
const nextPage = inject<() => void>("nextPage", () => {});
const isLoaded = inject<boolean>("isLoaded", false);
const clearComments = inject<() => void>("clearComments", () => {});
const loadingRef = ref<HTMLElement | null>(null);
</script>
<template>
  <el-drawer
    v-model="drawer"
    :title="`全部评论 ${total}`"
    size="25%"
    style="overflow-y: scroll; overflow-x: hidden"
    :destroy-on-close="true"
    @close="close"
  >
    <commentInput></commentInput>
    <div
      v-for="item in props.comments"
      :key="item!.id"
      style="margin-bottom: 20px"
    >
      <commentItem :data="item" />
    </div>
    <div class="loading" ref="loadingRef" v-if="drawer">
      {{ isLoaded ? "已经到底啦~" : "加载中......" }}
    </div>
  </el-drawer>
</template>
<style lang="scss" scoped>
.loading {
  height: 20px;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
  color: grey;
}
</style>
